import {
	Form,
	Radio,
	Select,
	Button,
	DatePicker,
	Card,
	Breadcrumb,
	Space,
	Table,
	Tag,
	Popconfirm,
} from 'antd'
import { http, history } from '@/utils'
import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { useStore } from '@/store'
import 'moment/locale/zh-cn'
import locale from 'antd/es/date-picker/locale/zh_CN'
import img404 from '@/assets/error.png'
import './index.scss'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
const { Option } = Select
const { RangePicker } = DatePicker

function Article() {
	const { channelStore } = useStore()
	// 删除
	const delConfirm = async (data) => {
		console.log('删除', data)
		await http.delete(`/mp/articles/${data.id}`)
		setParams({ page: 1, per_page: 10 })
	}
	// 点击筛选后
	const onFinish = (values) => {
		console.log('Success:', values)
		const { channel_id, date, status } = values
		const _params = {}
		if (status !== -1) {
			_params.status = status
		} else {
			_params.status = null
		}

		if (channel_id) {
			_params.channel_id = channel_id
		}
		if (date) {
			_params.begin_pubdate = date[0].format('YYYY-MM-DD')
			_params.end_pubdate = date[1].format('YYYY-MM-DD')
		}
		setParams({
			...params,
			..._params,
		})
	}
	//获取频道数据
	// const [channelList, setChannelList] = useState([])
	// useEffect(() => {
	// 	async function getChannel() {
	// 		const res = await http.get('/channels')
	// 		console.log(res)
	// 		setChannelList(res.data.channels)
	// 	}
	// 	getChannel()
	// }, [])

	//获取表格数据 1存放数据   2请求数据
	const [list, setList] = useState({
		list: [],
		count: 0,
	})
	const [params, setParams] = useState({
		page: 1,
		per_page: 10,
	})

	//分页点击
	const pageChange = (page) => {
		setParams({
			...params,
			page,
		})
	}
	useEffect(() => {
		async function getTable() {
			const res = await http.get('/mp/articles', { params })
			console.log(res)
			const { results, total_count } = res.data
			setList({
				list: results,
				count: total_count,
			})
		}
		getTable()
	}, [params])
	const columns = [
		{
			title: '封面',
			dataIndex: 'cover',
			width: 120,
			render: (cover) => {
				return (
					<img
						src={cover.images[0] || img404}
						width={80}
						height={60}
						alt=""
					/>
				)
			},
		},
		{
			title: '标题',
			dataIndex: 'title',
		},
		{
			title: '状态',
			dataIndex: 'status',
			render: (data) => <Tag color="green">审核通过</Tag>,
		},
		{
			title: '发布时间',
			dataIndex: 'pubdate',
		},
		{
			title: '阅读数',
			dataIndex: 'read_count',
		},
		{
			title: '评论数',
			dataIndex: 'comment_count',
		},
		{
			title: '点赞数',
			dataIndex: 'like_count',
		},
		{
			title: '操作',
			key: 'action',
			render: (data) => (
				<Space size="middle">
					<Button
						type="primary"
						shape="circle"
						icon={<EditOutlined />}
						onClick={() => history.push(`/publish?id=${data.id}`)}
					/>
					<Popconfirm
						title="确认删除吗"
						onConfirm={() => delConfirm(data)}
						okText="确认"
						cancelText="返回"
					>
						<Button
							type="primary"
							danger
							shape="circle"
							icon={<DeleteOutlined />}
						/>
					</Popconfirm>
				</Space>
			),
		},
	]
	return (
		<div>
			<Card
				title={
					<Breadcrumb separator=">">
						<Breadcrumb.Item>
							<Link to="/">首页</Link>
						</Breadcrumb.Item>
						<Breadcrumb.Item>内容管理</Breadcrumb.Item>
					</Breadcrumb>
				}
				style={{ marginBottom: 20 }}
			>
				<Form initialValues={{ status: null }} onFinish={onFinish}>
					<Form.Item label="状态" name="status">
						<Radio.Group>
							<Radio value={-1}>全部</Radio>
							<Radio value={0}>草稿</Radio>
							<Radio value={1}>待审核</Radio>
							<Radio value={2}>审核通过</Radio>
							<Radio value={3}>审核失败</Radio>
						</Radio.Group>
					</Form.Item>

					<Form.Item label="频道" name="channel_id">
						<Select
							placeholder="请选择文章频道"
							style={{ width: 120 }}
						>
							{channelStore.channelList.map((channel) => (
								<Option key={channel.id} value={channel.id}>
									{channel.name}
								</Option>
							))}
						</Select>
					</Form.Item>

					<Form.Item label="日期" name="date">
						<RangePicker locale={locale}></RangePicker>
					</Form.Item>

					<Form.Item>
						<Button
							type="primary"
							htmlType="submit"
							style={{ marginLeft: 80 }}
						>
							筛选
						</Button>
					</Form.Item>
				</Form>
			</Card>
			<Card title={`根据筛查条件共查询到${list.count}条结果`}>
				<Table
					rowKey="id"
					bordered
					columns={columns}
					dataSource={list.list}
					pagination={{
						position: ['bottomRight'],
						current: params.page,
						pageSize: params.per_page,
						onChange: pageChange,
						total: list.count,
					}}
				/>
			</Card>
		</div>
	)
}
export default Article
